<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","width":300,"display":"hide","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"disqus","storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="axios的使用axios请求方法主要有get，post，put，patch，delete  get 获取数据  post 提交数据（表单提交+文件上传）  put 更新数据（将所有数据均推放到服务端）  patch 更新数据（只将修改的数据推送到后端）  delete 删除数据">
<meta property="og:type" content="article">
<meta property="og:title" content="完整过一遍axios，再也不怕写请求">
<meta property="og:url" content="http://example.com/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
<meta property="og:site_name" content="爱笑爱工作-_-">
<meta property="og:description" content="axios的使用axios请求方法主要有get，post，put，patch，delete  get 获取数据  post 提交数据（表单提交+文件上传）  put 更新数据（将所有数据均推放到服务端）  patch 更新数据（只将修改的数据推送到后端）  delete 删除数据">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-12-09T09:51:33.493Z">
<meta property="article:modified_time" content="2021-12-09T10:19:49.895Z">
<meta property="article:author" content="爱笑">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://example.com/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>完整过一遍axios，再也不怕写请求 | 爱笑爱工作-_-</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
<a target="_blank" rel="noopener" href="https://github.com/aixiao0322" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">爱笑爱工作-_-</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/title.jpg">
      <meta itemprop="name" content="爱笑">
      <meta itemprop="description" content="热衷于前端，热衷于王者，王者峡谷乱杀 -_-">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱笑爱工作-_-">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          完整过一遍axios，再也不怕写请求
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-12-09 17:51:33 / 修改时间：18:19:49" itemprop="dateCreated datePublished" datetime="2021-12-09T17:51:33+08:00">2021-12-09</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          
            <span id="/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/" class="post-meta-item leancloud_visitors" data-flag-title="完整过一遍axios，再也不怕写请求" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
              <span>℃</span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="axios的使用"><a href="#axios的使用" class="headerlink" title="axios的使用"></a>axios的使用</h1><h2 id="axios请求方法"><a href="#axios请求方法" class="headerlink" title="axios请求方法"></a>axios请求方法</h2><p>主要有get，post，put，patch，delete</p>
<ul>
<li><p>get</p>
<p>获取数据</p>
</li>
<li><p>post</p>
<p>提交数据（表单提交+文件上传）</p>
</li>
<li><p>put</p>
<p>更新数据（将所有数据均推放到服务端）</p>
</li>
<li><p>patch</p>
<p>更新数据（只将修改的数据推送到后端）</p>
</li>
<li><p>delete</p>
<p>删除数据</p>
</li>
</ul>
<span id="more"></span>

<h3 id="get方法"><a href="#get方法" class="headerlink" title="get方法"></a>get方法</h3><h5 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h5><p>调用型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">axios.get(<span class="string">&#x27;/data.json&#x27;</span>).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(res)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>axios()型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  <span class="attr">method</span>:<span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">  <span class="attr">url</span>:<span class="string">&#x27;/data.json&#x27;</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="params"><a href="#params" class="headerlink" title="params"></a>params</h5><p>如果我们需要加载 : <a href="https://link.juejin.cn/?target=http://localhost:8080/data.json?id=12,%E5%BA%94%E8%AF%A5%E5%A6%82%E4%BD%95%E5%8E%BB%E8%8E%B7%E5%8F%96%E5%91%A2%EF%BC%9F">http://localhost:8080/data.json?id=12,应该如何去获取呢？</a></p>
<p>调用型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">axios.get(<span class="string">&#x27;/data.json&#x27;</span>,&#123;</span><br><span class="line">      <span class="attr">params</span>:&#123;</span><br><span class="line">        <span class="attr">id</span>:<span class="number">12</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(res)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>axios()方法型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  <span class="attr">method</span>:<span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">  <span class="attr">url</span>:<span class="string">&#x27;/data.json&#x27;</span>,</span><br><span class="line">  <span class="attr">params</span>:&#123;</span><br><span class="line">    <span class="attr">id</span>:<span class="number">12</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="post方法"><a href="#post方法" class="headerlink" title="post方法"></a>post方法</h3><h5 id="写法-1"><a href="#写法-1" class="headerlink" title="写法"></a>写法</h5><p>调用型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">axios.post(<span class="string">&#x27;/post&#x27;</span>,&#123;&#125;,config)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>post方法有三个参数，分别是url、数据、config。config参数暂时不讨论。</p>
<p>一般上传的数据分两种</p>
<ul>
<li>form-data 表单提交（图片上传、文件上传）</li>
<li>application/json</li>
<li>以上两种数据，都可以在请求发起后，进入浏览器network查看请求头中的content-type进行查看</li>
</ul>
<p>假设我们现在要上传一个数据：</p>
<figure class="highlight haskell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">let</span> <span class="class"><span class="keyword">data</span> = &#123; <span class="title">id</span>:12 &#125;</span></span><br></pre></td></tr></table></figure>

<p>那么我们可以直接将其传入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">axios.post(<span class="string">&#x27;/post&#x27;</span>,data).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>axios()方法型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  <span class="attr">method</span>:<span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">  <span class="attr">url</span>:<span class="string">&#x27;/post&#x27;</span>,</span><br><span class="line">  <span class="attr">data</span>:data</span><br><span class="line">&#125;).then(...)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="两种数据的小细节"><a href="#两种数据的小细节" class="headerlink" title="两种数据的小细节"></a>两种数据的小细节</h5><p>当我们上传的是一个一般的<code>let data = &#123; id:12 &#125;</code>数据时，Network的请求头里会显示为：<code>application/json；charset=UTF-8</code></p>
<p>当我们上传的是：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> data = &#123;<span class="attr">id</span>:<span class="number">12</span>&#125;</span><br><span class="line"><span class="keyword">let</span> formData = <span class="keyword">new</span> FormData()</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> data)&#123;</span><br><span class="line">      formData.append(key,data[key])</span><br><span class="line">    &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>这里将data转格式了，格式变为formdata形式。</p>
<p>那么Network的请求头里会显示为：<code>multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw</code></p>
<h3 id="put方法和patch方法"><a href="#put方法和patch方法" class="headerlink" title="put方法和patch方法"></a>put方法和patch方法</h3><p>形式与post方法大体相同，Network显示仅<strong>Request Method</strong>不同。</p>
<h3 id="delete方法"><a href="#delete方法" class="headerlink" title="delete方法"></a>delete方法</h3><h5 id="写法-2"><a href="#写法-2" class="headerlink" title="写法"></a>写法</h5><p>url删除法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//直接从url里面删除</span></span><br><span class="line">axios.delete(<span class="string">&#x27;/data.json&#x27;</span>,&#123;</span><br><span class="line">      <span class="attr">params</span>:&#123;</span><br><span class="line">        <span class="attr">id</span>:<span class="number">12</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(res)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>从url删除，Network请求头最后面会显示为：Query String Parameters</p>
<p>请求体删除法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">axios.delete(<span class="string">&#x27;/data.json&#x27;</span>,&#123;</span><br><span class="line">      <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">id</span>:<span class="number">12</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(res)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>从请求体里删除，Network请求头最后面会显示为：Request Payload</p>
<p>两种方法的删除方式是不同的，具体使用需要和后端沟通。</p>
<h3 id="并发请求"><a href="#并发请求" class="headerlink" title="并发请求"></a>并发请求</h3><h5 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h5><p>同时进行多个请求，并统一处理返回值。</p>
<p>案例：假设有一个聊天工具，同时有你的聊天记录和个人信息。此时需要调用两个接口去请求数据。此时需要统一处理他们的返回值。</p>
<h5 id="axios提供的方法：all、spread"><a href="#axios提供的方法：all、spread" class="headerlink" title="axios提供的方法：all、spread"></a>axios提供的方法：all、spread</h5><p>axios.all方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个promise对象，当数组中所有请求均已完成时，执行then方法。 在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserAccount</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> axios.get(<span class="string">&#x27;/user/12345&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserPermissions</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> axios.get(<span class="string">&#x27;/user/12345/permissions&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">axios.all([getUserAccount(), getUserPermissions()])</span><br><span class="line">  .then(axios.spread(<span class="function">(<span class="params">acct, perms</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 两个请求都完成后,acct是getUserAccount的返回值，同理，perms是 getUserPermissions的返回值</span></span><br><span class="line">  &#125;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="axios实例简介"><a href="#axios实例简介" class="headerlink" title="axios实例简介"></a>axios实例简介</h2><h4 id="为什么要用实例？"><a href="#为什么要用实例？" class="headerlink" title="为什么要用实例？"></a>为什么要用实例？</h4><p>当我们需要用到不同的后端域名，直接调用<code>axios.get</code>并不太方便。我们可以用创建实例的方式去调用，不同的域名用不同的实例一一对应。</p>
<h4 id="表现形式"><a href="#表现形式" class="headerlink" title="表现形式"></a>表现形式</h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">created</span><span class="params">()</span></span> &#123;</span><br><span class="line">    let instance = axios<span class="selector-class">.create</span>(&#123;</span><br><span class="line">      baseURL:<span class="string">&#x27;http://localhost:8080&#x27;</span>,<span class="comment">//基本请求路径</span></span><br><span class="line">      timeout:<span class="number">1000</span>,<span class="comment">//超时设定</span></span><br><span class="line">    &#125;)</span><br><span class="line">    instance<span class="selector-class">.get</span>(<span class="string">&#x27;/data.json&#x27;</span>)<span class="selector-class">.then</span>(res=&gt;&#123;</span><br><span class="line">       console<span class="selector-class">.log</span>(res)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="基本配置方法"><a href="#基本配置方法" class="headerlink" title="基本配置方法"></a>基本配置方法</h2><figure class="highlight oxygene"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">baseURL:<span class="string">&#x27;http://localhost:8080&#x27;</span>,<span class="comment">//请求的域名、基本地址</span></span><br><span class="line">timeout:<span class="number">1000</span>,<span class="comment">//请求超时时长（ms）</span></span><br><span class="line">url:<span class="string">&#x27;/data.json&#x27;</span>,<span class="comment">//请求路径</span></span><br><span class="line"><span class="function"><span class="keyword">method</span>:</span><span class="string">&#x27;get，post，put，patch,delete&#x27;</span>,<span class="comment">//请求方法</span></span><br><span class="line">headers:<span class="comment">&#123;</span></span><br><span class="line"><span class="comment">  token:&#x27;&#x27;//代表当前登陆人的身份信息</span></span><br><span class="line"><span class="comment">&#125;</span>,<span class="comment">//设置请求头</span></span><br><span class="line"><span class="keyword">params</span>:<span class="comment">&#123;&#125;</span>,<span class="comment">//将请求参数拼接在url上，是一个对象</span></span><br><span class="line">data:<span class="comment">&#123;&#125;</span><span class="comment">//将请求参数放在请求体里，是一个对象</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>其中，params和data表现形式为对象。</p>
<p>使用场景通常是发起请求时，顺带传送参数：</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="regexp">//</span>以get请求为例，get有两个配置，分别是相对路径和config</span><br><span class="line">axios.get(<span class="string">&#x27;/data.json&#x27;</span>,&#123;</span><br><span class="line"> params:&#123;</span><br><span class="line">    <span class="regexp">//</span>参数</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="参数配置方法"><a href="#参数配置方法" class="headerlink" title="参数配置方法"></a>参数配置方法</h2><h4 id="1-全局配置"><a href="#1-全局配置" class="headerlink" title="1.全局配置"></a>1.全局配置</h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">axios<span class="selector-class">.defaults</span>.基本配置方法（baseurl等）</span><br><span class="line">如：</span><br><span class="line">axios<span class="selector-class">.defaults</span><span class="selector-class">.timeout</span> = <span class="number">1000</span> <span class="comment">//全局配置请求时长1s</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="2-实例配置"><a href="#2-实例配置" class="headerlink" title="2.实例配置"></a>2.实例配置</h4><figure class="highlight smali"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let<span class="built_in"> instance </span>= axios.create(</span><br><span class="line">  //基本配置方法</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>如果设置了全局的配置方法，而实例配置中没有设置相应的方法，则延用全局的方法，否则，以实例中的方法为主。</p>
<h4 id="3-axios请求配置"><a href="#3-axios请求配置" class="headerlink" title="3.axios请求配置"></a>3.axios请求配置</h4><p>视具体情况而定，如调用某个路径的文件巨大，我们可以单独对其请求时长进行设置：</p>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">instance.<span class="builtin-name">get</span>(<span class="string">&#x27;/data.json&#x27;</span>,&#123;</span><br><span class="line">  timeout:5000</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><p>优先级：请求配置 &gt; 实例配置 &gt; 全局配置</p>
<h2 id="拦截器"><a href="#拦截器" class="headerlink" title="拦截器"></a>拦截器</h2><p>在发起请求前做一些处理，再发起请求后再做一些处理。</p>
<p>分为请求拦截器和响应拦截器</p>
<h4 id="请求拦截器"><a href="#请求拦截器" class="headerlink" title="请求拦截器"></a>请求拦截器</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">axios.interceptors.request.use(</span><br><span class="line">  <span class="function"><span class="params">config</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">//在发送请求前做些什么</span></span><br><span class="line">    <span class="keyword">return</span> config</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 在请求错误的时候做些什么（此处错误，请求没有到后端）</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)<span class="comment">//这里返回一个promise对象</span></span><br><span class="line">  &#125;</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="响应拦截器"><a href="#响应拦截器" class="headerlink" title="响应拦截器"></a>响应拦截器</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">axios.interceptors.responce.use(</span><br><span class="line">  <span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">     <span class="comment">//请求成功对响应数据进行处理</span></span><br><span class="line">     <span class="keyword">return</span> res</span><br><span class="line">  &#125;,<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">     <span class="comment">//响应错误做些什么（此处错误，到达后端后返回）</span></span><br><span class="line">     <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line">  &#125;</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>两者都在响应错误后进行了promise对象的返回，具体的作用是什么呢？</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">axios</span><span class="selector-class">.get</span>()<span class="selector-class">.then</span>()<span class="selector-class">.catch</span>(err=&gt;&#123;&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>这一段代码是我们平时发送get请求时的标准形态，then会执行请求成功后的操作，catch用来捕获错误。</p>
<p>我们前面拦截响应后，无论是请求还是响应的拦截器，他们的err返回的promise都会进入catch中。</p>
<h4 id="取消拦截器（了解即可）"><a href="#取消拦截器（了解即可）" class="headerlink" title="取消拦截器（了解即可）"></a>取消拦截器（了解即可）</h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let inerceptors = axios<span class="selector-class">.interceptors</span><span class="selector-class">.request</span><span class="selector-class">.use</span></span><br><span class="line">(config=&gt;&#123;</span><br><span class="line">     config<span class="selector-class">.header</span> = &#123;</span><br><span class="line">         auth:true</span><br><span class="line">     &#125;</span><br><span class="line">     return config</span><br><span class="line">&#125;)</span><br><span class="line">axios<span class="selector-class">.inerceptors</span><span class="selector-class">.request</span><span class="selector-class">.eject</span>(interceptors) <span class="comment">//用axios全局去调用interceptors，这样就取消拦截了。。。</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="举个栗子"><a href="#举个栗子" class="headerlink" title="举个栗子"></a>举个栗子</h4><p>通过拦截器控制登陆状态</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 登陆状态,有token</span></span><br><span class="line">let request = axios<span class="selector-class">.create</span>(&#123;&#125;)</span><br><span class="line">request<span class="selector-class">.interceptors</span><span class="selector-class">.request</span><span class="selector-class">.use</span></span><br><span class="line">(config =&gt; &#123;</span><br><span class="line">   config<span class="selector-class">.headers</span><span class="selector-class">.token</span> = <span class="string">&#x27;&#x27;</span></span><br><span class="line">   return config</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 非登陆状态，无token </span></span><br><span class="line">let request2 = axios<span class="selector-class">.create</span>(&#123;&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>有token的可以访问更多，get更多的数据，无token则不行。类似于评论需要登陆</p>
<h2 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a>错误处理</h2><h4 id="表现形式-1"><a href="#表现形式-1" class="headerlink" title="表现形式"></a>表现形式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//首先设置拦截器</span></span><br><span class="line">axios.interceptors.request.use(</span><br><span class="line"> <span class="function"><span class="params">config</span> =&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> config</span><br><span class="line"> &#125;,<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line"> &#125;</span><br><span class="line">)</span><br><span class="line">axios.interceptors.response.use(</span><br><span class="line"> <span class="function"><span class="params">res</span> =&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> res</span><br><span class="line"> &#125;,<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line"> &#125;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="comment">//错误的获取</span></span><br><span class="line">axios.get(<span class="string">&#x27;/data.json&#x27;</span>).then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;).catch(<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err) <span class="comment">//所有错误处理都会进入此处</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>具体的实践过程中，我们需要创建一个统一的错误处理，将所有的错误类型都放在拦截其中，方便我们后面调用接口时使用。</p>
<h4 id="栗子"><a href="#栗子" class="headerlink" title="栗子"></a>栗子</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建一个请求实例</span></span><br><span class="line"><span class="keyword">let</span> instance = axios.create(&#123;&#125;)</span><br><span class="line"><span class="comment">//为请求实例添加请求拦截器</span></span><br><span class="line">instance.interceptors.request.use(</span><br><span class="line"> <span class="function"><span class="params">config</span> =&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> config</span><br><span class="line"> &#125;,<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line"> <span class="comment">//请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line"> &#125;</span><br><span class="line">)</span><br><span class="line">instance.interceptors.response.use(</span><br><span class="line">  <span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res</span><br><span class="line">  &#125;,<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line">    <span class="comment">//响应错误,一般http状态码以5开头，500系统错误，502系统重启等，偏向于服务端返回的报错</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line">  &#125;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="comment">//使用</span></span><br><span class="line">instance.get(<span class="string">&#x27;data&#x27;</span>).then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">   <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;).catch(<span class="function"><span class="params">err</span> =&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="本文转自：Benjamin59"><a href="#本文转自：Benjamin59" class="headerlink" title="本文转自：Benjamin59"></a>本文转自：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7034827130701611016">Benjamin59</a></h1>
    </div>

<div>

<div>

    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

</div>


</div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://weibo.com/u/6480746839">
            <span class="icon">
              <i class="fab fa-weibo"></i>
            </span>

            <span class="label">微博</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://www.zhihu.com/people/ai-xiao-92-34">
            <span class="icon">
              <i class="fab fa-zhihu"></i>
            </span>

            <span class="label">知乎</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://mp.weixin.qq.com/s/gQBZKv4EyHc_X-CSebCjIw">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">微信</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/12/09/vue-cli%E7%9B%AE%E5%BD%95%E8%AE%B2%E8%A7%A3/" rel="prev" title="vue-cli 目录结构详细讲解">
      <i class="fa fa-chevron-left"></i> vue-cli 目录结构详细讲解
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/" rel="next" title="常用的前端JavaScript方法封装">
      常用的前端JavaScript方法封装 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#axios%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-number">1.</span> <span class="nav-text">axios的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#axios%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">axios请求方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#get%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.1.</span> <span class="nav-text">get方法</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%86%99%E6%B3%95"><span class="nav-number">1.1.1.0.1.</span> <span class="nav-text">写法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#params"><span class="nav-number">1.1.1.0.2.</span> <span class="nav-text">params</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#post%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.2.</span> <span class="nav-text">post方法</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%86%99%E6%B3%95-1"><span class="nav-number">1.1.2.0.1.</span> <span class="nav-text">写法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%B8%A4%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%9A%84%E5%B0%8F%E7%BB%86%E8%8A%82"><span class="nav-number">1.1.2.0.2.</span> <span class="nav-text">两种数据的小细节</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#put%E6%96%B9%E6%B3%95%E5%92%8Cpatch%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.3.</span> <span class="nav-text">put方法和patch方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#delete%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.4.</span> <span class="nav-text">delete方法</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%86%99%E6%B3%95-2"><span class="nav-number">1.1.4.0.1.</span> <span class="nav-text">写法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82"><span class="nav-number">1.1.5.</span> <span class="nav-text">并发请求</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AE%80%E4%BB%8B"><span class="nav-number">1.1.5.0.1.</span> <span class="nav-text">简介</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#axios%E6%8F%90%E4%BE%9B%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9Aall%E3%80%81spread"><span class="nav-number">1.1.5.0.2.</span> <span class="nav-text">axios提供的方法：all、spread</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#axios%E5%AE%9E%E4%BE%8B%E7%AE%80%E4%BB%8B"><span class="nav-number">1.2.</span> <span class="nav-text">axios实例简介</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%9E%E4%BE%8B%EF%BC%9F"><span class="nav-number">1.2.0.1.</span> <span class="nav-text">为什么要用实例？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A1%A8%E7%8E%B0%E5%BD%A2%E5%BC%8F"><span class="nav-number">1.2.0.2.</span> <span class="nav-text">表现形式</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE%E6%96%B9%E6%B3%95"><span class="nav-number">1.3.</span> <span class="nav-text">基本配置方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE%E6%96%B9%E6%B3%95"><span class="nav-number">1.4.</span> <span class="nav-text">参数配置方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE"><span class="nav-number">1.4.0.1.</span> <span class="nav-text">1.全局配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-%E5%AE%9E%E4%BE%8B%E9%85%8D%E7%BD%AE"><span class="nav-number">1.4.0.2.</span> <span class="nav-text">2.实例配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-axios%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE"><span class="nav-number">1.4.0.3.</span> <span class="nav-text">3.axios请求配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.4.0.4.</span> <span class="nav-text">总结</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8B%A6%E6%88%AA%E5%99%A8"><span class="nav-number">1.5.</span> <span class="nav-text">拦截器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%E5%99%A8"><span class="nav-number">1.5.0.1.</span> <span class="nav-text">请求拦截器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E6%8B%A6%E6%88%AA%E5%99%A8"><span class="nav-number">1.5.0.2.</span> <span class="nav-text">响应拦截器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%96%E6%B6%88%E6%8B%A6%E6%88%AA%E5%99%A8%EF%BC%88%E4%BA%86%E8%A7%A3%E5%8D%B3%E5%8F%AF%EF%BC%89"><span class="nav-number">1.5.0.3.</span> <span class="nav-text">取消拦截器（了解即可）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E6%A0%97%E5%AD%90"><span class="nav-number">1.5.0.4.</span> <span class="nav-text">举个栗子</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="nav-number">1.6.</span> <span class="nav-text">错误处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A1%A8%E7%8E%B0%E5%BD%A2%E5%BC%8F-1"><span class="nav-number">1.6.0.1.</span> <span class="nav-text">表现形式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%97%E5%AD%90"><span class="nav-number">1.6.0.2.</span> <span class="nav-text">栗子</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%AC%E6%96%87%E8%BD%AC%E8%87%AA%EF%BC%9ABenjamin59"><span class="nav-number">2.</span> <span class="nav-text">本文转自：Benjamin59</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱笑"
      src="/images/title.jpg">
  <p class="site-author-name" itemprop="name">爱笑</p>
  <div class="site-description" itemprop="description">热衷于前端，热衷于王者，王者峡谷乱杀 -_-</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">14</span>
          <span class="site-state-item-name">文章</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="sidebar-button motion-element"><i class="fa fa-comment"></i>
    评论
  </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/aixiao0322" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://gitee.com/aixiao0322" title="gitee → https:&#x2F;&#x2F;gitee.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-gratipay fa-fw"></i>gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/aini17630247921@163.com" title="E-Mail → aini17630247921@163.com"><i class="fab fa-youtube fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://juejin.cn/user/255500362975704" title="掘金 → https:&#x2F;&#x2F;juejin.cn&#x2F;user&#x2F;255500362975704" rel="noopener" target="_blank"><i class="fab fa-artstation fa-fw"></i>掘金</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱笑</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
















  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'l6M4SnuhiCKBnxpPdX1WbBB9-gzGzoHsz',
      appKey     : 'u1jJ2Fs9DGFdfpIgDQll55ju',
      placeholder: "请举手发言.... 请你填写自己的昵称，邮箱以及博客链接，为了更方便的找到您",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : true,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
